﻿$k.fn.draw = function (config) {
    var obj = function (selector, config) {
        this.selector = selector;
        this.canvas = this.selector[0];
        if (config.width) {
            this.selector.attr('width', config.width);
        }
        if (config.height) {
            this.selector.attr('height', config.height);
        }
        this.config = $.extendEx({}, this.defConfig, { width: this.canvas.width, height: this.canvas.height }, config);
        
        this.data = $.extendEx({ lines: [] }, this.config.data);
        
        if (this.canvas.getContext) {
            this.ctx = this.canvas.getContext("2d");
            //this.ctx.strokeStyle = this.config.strokeStyle;//stroke()调用之前设置.
            $.extendEx(this.ctx, this.config.context);
        }
    }
    obj.prototype.defConfig = {
        context:{
            strokeStyle: 'blue'
        }
    };
    obj.prototype.clear = function () {
        var _obj = this;
        if (!_obj.ctx) {
            return;
        }
        _obj.ctx.clearRect(0, 0, _obj.config.width, _obj.config.height);
        _obj.data.lines = [];
    }
    obj.prototype._draw = function (data) {
        if (!data || !data.lines) {
            return;
        }
        var _obj = this;
        $.each(data.lines, function (i, line) {
            _obj.ctx.beginPath();
            $.each(line, function (j, p) {
                if (j == 0) {
                    _obj.ctx.moveTo(p.x, p.y);
                }
                else {
                    _obj.ctx.lineTo(p.x, p.y);
                }
            });
            _obj.ctx.stroke();
            _obj.ctx.closePath();
        });
    }
    obj.prototype.draw = function () {
        var _obj = this;
        if (!_obj.ctx) {
            top.kwindow.alert({content:'浏览器不支持canvas'});
            return;
        }
        if (_obj.config.data) {
            _obj._draw(_obj.config.data);
        }
        var isMouseDown = false;
        var prePoint;
        var line;
        _obj.selector.mousedown(function (e) {
            isMouseDown = true;
            prePoint = { x: e.offsetX, y: e.offsetY };
            line = [prePoint];
        });
        _obj.selector.mouseleave(function (e) {
            if (!isMouseDown) {
                return;
            }
            if (line) {
                _obj.data.lines.push(line);
                line = null;
            }
        });
        _obj.selector.mouseenter(function (e) {
            if (!isMouseDown) {
                return;
            }
            prePoint = { x: e.offsetX, y: e.offsetY };
            line = [prePoint];
        });
        _obj.selector.mousemove(function (e) {
            if (!isMouseDown) {
                return;
            }
            var x = e.offsetX;
            var y = e.offsetY;
            _obj.ctx.beginPath();
            _obj.ctx.moveTo(prePoint.x, prePoint.y);
            _obj.ctx.lineTo(x, y);
            _obj.ctx.stroke();
            _obj.ctx.closePath();
            prePoint = { x: x, y: y };
            line.push(prePoint);
        });
        $(document).mouseup(function (e) {
            isMouseDown = false;
            if (line) {
                _obj.data.lines.push(line);
                line = null;
            }
        });
    }

    var _obj = new obj($(this.jo), config || {});
    _obj.draw();
    return _obj;
}